<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>编辑用户信息</title>
    <!-- 引入LayUI资源 -->
    <link rel="stylesheet" href="js/layui/new/layui-new.css">
    <style>
        /* 页面容器 */
        .page-container {
            padding: 20px;
            max-width: 800px;
            margin: 0 auto;
        }

        /* 表单样式优化 */
        .form-container {
            background: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .layui-form-item {
            margin-bottom: 20px;
        }

        .layui-form-label {
            width: 120px;
            font-weight: 500;
        }

        .layui-input-block {
            margin-left: 150px;
        }

        .form-actions {
            margin-top: 30px;
            text-align: center;
            border-top: 1px solid #e6e6e6;
            padding-top: 20px;
        }

        .form-actions .layui-btn {
            margin: 0 10px;
            min-width: 100px;
        }

        /* 加载状态 */
        .loading-container {
            text-align: center;
            padding: 50px;
            color: #999;
        }

        /* 错误提示 */
        .error-message {
            color: #FF5722;
            text-align: center;
            padding: 20px;
            font-size: 16px;
        }
    </style>
</head>
<body class="layui-layout-body">

<div class="page-container">
    <div class="layui-card">
        <div class="layui-card-header">
            <h2>编辑用户信息</h2>
        </div>
        <div class="layui-card-body">
            <!-- 加载状态 -->
            <div id="loadingContainer" class="loading-container">
                <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>
                <p>正在加载用户信息...</p>
            </div>

            <!-- 错误提示 -->
            <div id="errorContainer" class="error-message" style="display: none;">
                <i class="layui-icon layui-icon-face-cry"></i>
                <p id="errorText"></p>
                <button class="layui-btn layui-btn-primary" onclick="location.reload()">重新加载</button>
            </div>

            <!-- 编辑表单 -->
            <div id="formContainer" class="form-container" style="display: none;">
                <form class="layui-form" lay-filter="editEmployeeForm" id="editEmployeeForm">
                    <input type="hidden" name="loginName" id="loginName">

                    <div class="layui-form-item">
                        <label class="layui-form-label">登录账号</label>
                        <div class="layui-input-block">
                            <input type="text" name="loginNameDisplay" id="loginNameDisplay" class="layui-input" readonly style="background-color: #f5f5f5;">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">姓名 <span style="color:red">*</span></label>
                        <div class="layui-input-block">
                            <input type="text" name="actualName" lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-block">
                            <input type="radio" name="gender" value="男" title="男">
                            <input type="radio" name="gender" value="女" title="女">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">手机号 <span style="color:red">*</span></label>
                        <div class="layui-input-block">
                            <input type="text" name="phone" lay-verify="required|phone" placeholder="请输入手机号" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">邮箱</label>
                        <div class="layui-input-block">
                            <input type="text" name="email" lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">部门 <span style="color:red">*</span></label>
                        <div class="layui-input-block">
                            <select name="department" lay-verify="required">
                                <option value="">请选择部门</option>
                                <option value="西安研发部">西安研发部</option>
                                <option value="北京研发部">北京研发部</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">职务 <span style="color:red">*</span></label>
                        <div class="layui-input-block">
                            <select name="position" lay-verify="required">
                                <option value="">请选择职位</option>
                                <option value="软件开发">软件开发</option>
                                <option value="测试">测试</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">状态</label>
                        <div class="layui-input-block">
                            <input type="radio" name="idDisabled" value="启用" title="启用">
                            <input type="radio" name="idDisabled" value="禁用" title="禁用">
                        </div>
                    </div>

                    <div class="form-actions">
                        <button type="button" class="layui-btn layui-btn-primary" id="btnCancel">取消</button>
                        <button type="submit" class="layui-btn" lay-submit lay-filter="submitEdit">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 引入LayUI核心 -->
<script src="js/layui/new/layui-new.js"></script>
<script>
    layui.use(['form', 'layer'], function(){
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.$;

        // 获取URL参数
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return decodeURIComponent(r[2]); return null;
        }

        // 获取用户登录名
        var loginName = getUrlParam('loginName');
        if (!loginName) {
            showError('缺少用户登录名参数');
            return;
        }

        // 加载用户信息
        loadEmployeeInfo(loginName);

        // 加载用户信息函数
        function loadEmployeeInfo(loginName) {
            $.ajax({
                url: '/employee/get',
                type: 'GET',
                data: {loginName: loginName},
                dataType: 'json',
                success: function(res) {
                    if (res.code === 1) {
                        // 加载成功，填充表单
                        fillFormData(res.data);
                        showForm();
                    } else {
                        showError(res.message || '获取用户信息失败');
                    }
                },
                error: function() {
                    showError('网络异常，请稍后重试');
                }
            });
        }

        // 填充表单数据
        function fillFormData(employee) {
            // 设置登录名（只读显示）
            $('#loginName').val(employee.loginName);
            $('#loginNameDisplay').val(employee.loginName);

            // 填充表单字段
            form.val('editEmployeeForm', {
                'actualName': employee.actualName,
                'gender': employee.gender === 0 ? '男' : '女',
                'phone': employee.phone,
                'email': employee.email || '',
                'department': getDepartmentName(employee.departmentId),
                'position': getPositionName(employee.positionId),
                'idDisabled': employee.disabledFlag === 0 ? '启用' : '禁用'
            });

            // 重新渲染表单
            form.render();
        }

        // 根据部门ID获取部门名称
        function getDepartmentName(departmentId) {
            var departmentMap = {
                1: '西安研发部',
                2: '北京研发部'
            };
            return departmentMap[departmentId] || '';
        }

        // 根据职务ID获取职务名称
        function getPositionName(positionId) {
            var positionMap = {
                1: '软件开发',
                2: '测试'
            };
            return positionMap[positionId] || '';
        }

        // 显示表单
        function showForm() {
            $('#loadingContainer').hide();
            $('#formContainer').show();
        }

        // 显示错误信息
        function showError(message) {
            $('#loadingContainer').hide();
            $('#errorText').text(message);
            $('#errorContainer').show();
        }

        // 取消按钮事件
        $('#btnCancel').on('click', function() {
            // 返回上一页
            if (window.history.length > 1) {
                window.history.back();
            } else {
                location.href = 'employee.html';
            }
        });

        // 表单提交事件
        form.on('submit(submitEdit)', function(data){
            // 显示加载状态
            var loadIndex = layer.load(1, {shade: [0.3, '#000']});

            // 提交到后端
            $.ajax({
                url: '/employee/update',
                type: 'POST',
                data: data.field,
                dataType: 'json',
                success: function(res) {
                    layer.close(loadIndex);
                    if (res.code === 1) {
                        layer.msg(res.message || '更新成功', {icon: 1, time: 1500}, function() {
                            // 返回用户列表页
                            location.href = 'employee.html';
                        });
                    } else {
                        layer.msg('更新失败：' + (res.message || '未知错误'), {icon: 2, time: 2000});
                    }
                },
                error: function() {
                    layer.close(loadIndex);
                    layer.msg('网络异常，请稍后重试', {icon: 2});
                }
            });
            return false; // 阻止表单默认提交
        });

        // 自定义验证规则
        form.verify({
            phone: [
                /^1[3-9]\d{9}$/
                ,'请输入正确的手机号'
            ],
            email: [
                /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
                ,'请输入正确的邮箱地址'
            ]
        });
    });
</script>
</body>
</html>